<template>
  <Layout>
    <div class="textTip-wrap">
      <div class="textTip" v-if="amountReduce===0&&amountAdd===0">
        <Tags :tagsType="null"/>
        还没数据哦~
      </div>
    </div>
    <Eschart :optionValue="[amountAdd,amountReduce]"/>

    <span class="slider-eschart-in">收入：{{amountAdd}}元</span>
    <div class="slider-eschart">
      <van-slider v-model="percentAmountAdd" active-color="#1e90ff" disabled>
        <template #button>
          <div class="custom-button custom-button-in">{{ `${percentAmountAdd}%`}}</div>
        </template>
      </van-slider>
    </div>
    <span class="slider-eschart-out">支出：{{amountReduce}}元</span>
    <div class="slider-eschart">
      <van-slider v-model="percentAmountReduce" active-color="#ee0a24" disabled>
        <template #button>
          <div class="custom-button custom-button-out">{{ `${percentAmountReduce}%` }}</div>
        </template>
      </van-slider>
    </div>
  </Layout>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  import { Slider } from 'vant';
  import Eschart from '@/components/Label/Eschart02.vue';

  Vue.use(Slider);

  @Component({
    components:{Eschart}
  })
  export default class Labels extends Vue{
    created(){
      this.$store.commit('clearEditDate')
      this.getAmount()
    }
    amountAdd=0
    amountReduce=0
    percentAmountAdd=0
    percentAmountReduce=0
    storeAdd=this.$store.state.amountAdd
    storeReduce=this.$store.state.amountReduce
    roundFun(value:number, n:number) {
      return Math.round(value*Math.pow(10,n))/Math.pow(10,n);
    }
    toNumber(arr:[]){
      return  arr.map(x=>parseFloat(x))
    }
    getAmount() {
      let add=this.storeAdd.length>0
        ?this.toNumber(this.storeAdd).reduce((a:number,b:number)=>a+b)
        :0
      let reduce=this.storeReduce.length>0
        ?this.toNumber(this.storeReduce).reduce((a:number,b:number)=>a+b)
        :0
      this.amountAdd=add
      this.amountReduce=reduce
      let Add=add+reduce
      this.percentAmountAdd=Number.isNaN(add/Add)
        ?0:this.roundFun(add/Add,2)*100
      this.percentAmountReduce=Number.isNaN(reduce/Add)
        ?0:this.roundFun(reduce/Add,2)*100
    }
  }

</script>
<style lang="scss" scoped>
  .textTip-wrap{
    position: relative;
  }
  .textTip{
    position: absolute;
    left: 50%;
    transform: translate(-50%,200%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #888888;
    .icon{
      fill:currentColor;
    }
  }
  .custom-button {
    width: 40px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    border-radius:100px;
    &-out{
      background-color: #ee0a24;
      margin-left: 3em;
    }
    &-in{
      background-color: #1e90ff;
      margin-left: 3em;
    }
  }
  .slider-eschart{
    padding: 1em 1em;
  }
  .slider-eschart-out{
    color: red;
    margin-left: 1em;
  }
  .slider-eschart-in{
    color: dodgerblue;
    margin-left: 1em;
  }
  .van-slider{
    width: 90%;
  }
  .van-slider--disabled {
    opacity: 1;
  }
</style>
